<template>
	<div>
		<div class="footer">
			<router-link  
				v-for="(v, i) in data" 
				:key="i"
				:to="v.path"
			>{{ v.name }}</router-link>
		</div>
	</div>
</template>

<script>
export default {
	created() {
		console.log(this.data);
	},
	props: {
		data: {
			type: Array,
			require: true
		}
	}
}
</script>

<style lang="scss" scoped>
.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 36px;
	border-top: 1px solid #ccc;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #fff;
	a {
		text-decoration: none;
		color: #000;
		&.router-link-exact-active {
			color: red;
		}
	}
}
</style>